<template>
  <div>
    <el-button type="primary" @click="dialog=true;Add=true;Edit=false;SeatRe()">添加</el-button>
    <el-table :data="Hall.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
      <el-table-column label="影厅ID" prop="hall.HallID"></el-table-column>
      <el-table-column label="影厅名" prop="hall.HallName"></el-table-column>
      <el-table-column label="影厅类型" prop="hall.HallType"></el-table-column>
      <el-table-column label="编辑">
        <template slot-scope="scope">
          <el-button type="danger" @click="dialog=true;Edit=true;Add=false;SelectHall(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center;margin-top: 30px;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="current_change"
      ></el-pagination>
    </div>
    <el-dialog title="影厅信息" :visible.sync="dialog" @close="resetForm('searchForm')" width="60%">
      <el-form ref="searchForm" label-position="left" label-width="80px">
        <el-form-item label="影厅名">
          <el-input v-model="HallInfo.hall.HallName" placeholder="影厅名"></el-input>
        </el-form-item>
        <el-form-item label="影厅类型">
          <el-input v-model="HallInfo.hall.HallType" placeholder="影厅类型"></el-input>
        </el-form-item>
        <el-form-item label="座位">
          <seat :Edit="true" :key="id"></seat>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="HallAdd()" v-if="Add">确 定</el-button>
        <el-button type="primary" @click="HallEdit()" v-if="Edit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import seat from "@/views/seat";
export default {
  components: {
    seat
  },
  data() {
    return {
      total: 0,
      pagesize: 10,
      currentPage: 1,
      Hall: null,
      dialog: false,
      HallInfo: {
        hall: {
          HallID: null,
          HallName: null,
          HallType: null
        },
        hallSeat: {
          twoArray: null,
          x: null,
          y: null
        }
      },
      Add: true,
      Edit: false,
      id: +new Date(),
      Seat: ""
    };
  },
  created() {
    this.Ajax.get("api/Hall/GetHallInfo").then(H => {
      this.Hall = H.data;
      this.total = H.data.length;
    });
  },
  methods: {
    SeatRe() {
      this.HallInfo.hall.HallID = null;
      this.HallInfo.hall.HallName = null;
      this.HallInfo.hall.HallType = null;
      this.id = +new Date();
      this.$store.commit("SeatUp", null);
      this.$store.commit("SeatRowUp", null);
      this.$store.commit("SeatColUp", null);
    },
    SeatUp(row) {
      this.$store.commit("SeatUp", row.hallSeat.twoArray);
      this.$store.commit("SeatRowUp", row.hallSeat.x);
      this.$store.commit("SeatColUp", row.hallSeat.y);
    },
    current_change: function(currentPage) {
      this.currentPage = currentPage;
    },
    SelectHall(row) {
      this.id = +new Date();
      this.HallInfo = row;
      this.SeatUp(row);
    },
    resetForm(searchForm) {
      this.$refs[searchForm].resetFields();
    },
    HallAdd() {
      let oldArray = this.$store.state.Seat;
      let col=this.$store.state.y
      let row=this.$store.state.x
      var seat = "";
      for (let i = 0; i < row; i++) {
        for (let j = 0; j < col; j++) {
          seat += oldArray[i][j];
          if (j != col - 1) {
            seat += ",";
          }
        }
        if (i != row - 1) {
          seat += "=";
        }
      }

      this.Seat = seat;
      this.Ajax.post("api/Hall/AddHall", {
        Hall: this.HallInfo,
        Seat: this.Seat
      }).then(M => {
        this.$message({
          message: "添加成功",
          type: "success"
        });
        this.dialog = false;
        location.reload()
      });
    },
    HallEdit() {
      let oldArray = this.$store.state.Seat;
      let col=this.$store.state.y
      let row=this.$store.state.x
      var seat = "";
      for (let i = 0; i < row; i++) {
        for (let j = 0; j < col; j++) {
          seat += oldArray[i][j];
          if (j != col - 1) {
            seat += ",";
          }
        }
        if (i != row - 1) {
          seat += "=";
        }
      }

      this.Seat = seat;
      this.Ajax.post("api/Hall/EditHall", {
        Hall: this.HallInfo,
        Seat: this.Seat
      }).then(M => {
        this.$message({
          message: "修改成功",
          type: "success"
        });
        this.dialog = false;
        location.reload()
      });
    }
  }
};
</script>